/*! Semantic UI integration for DataTables' Editor
 * ©2015 SpryMedia Ltd - datatables.net/license
 */

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'datatables-semantic', 'datatables-editor'], function ($) {
            return factory($, window, document);
        });
    }
    else if (typeof exports === 'object') {
        // CommonJS
        module.exports = function (root, $) {
            if (!root) {
                root = window;
            }

            if (!$ || !$.fn.dataTable) {
                $ = require('datatables-semantic')(root, $).$;
            }

            if (!$.fn.dataTable.Editor) {
                require('datatables-editor')(root, $);
            }

            return factory($, root, root.document);
        };
    }
    else {
        // Browser
        factory(jQuery, window, document);
    }
}(function ($, window, document, undefined) {
    'use strict';
    var DataTable = $.fn.dataTable;


    /*
     * Set the default display controller to be our bootstrap control
     */
    DataTable.Editor.defaults.display = "bootstrap";


    /*
     * Alter the buttons that Editor adds to TableTools so they are suitable for bootstrap
     */
    var i18nDefaults = DataTable.Editor.defaults.i18n;
    i18nDefaults.create.title = "<h3>" + i18nDefaults.create.title + "</h3>";
    i18nDefaults.edit.title = "<h3>" + i18nDefaults.edit.title + "</h3>";
    i18nDefaults.remove.title = "<h3>" + i18nDefaults.remove.title + "</h3>";

    var tt = DataTable.TableTools;
    if (tt) {
        tt.BUTTONS.editor_create.formButtons[0].className = "ui blue button";
        tt.BUTTONS.editor_edit.formButtons[0].className = "ui blue button";
        tt.BUTTONS.editor_remove.formButtons[0].className = "ui red button";
    }


    /*
     * Change the default classes from Editor to be classes for Bootstrap
     */
    $.extend(true, $.fn.dataTable.Editor.classes, {
        "header": {
            "wrapper": "DTE_Header header"
        },
        "body": {
            "wrapper": "DTE_Body content"
        },
        "footer": {
            "wrapper": "DTE_Footer actions"
        },
        "form": {
            "tag": "ui form",
            "button": "ui blue button"
        },
        "field": {
            "wrapper": "DTE_Field field",
            "label": "",
            "input": "",
            "error": "error has-error",
            "msg-labelInfo": "help-block",
            "msg-info": "help-block",
            "msg-message": "help-block",
            "msg-error": "help-block",
            "multiValue": "well well-sm multi-value",
            "multiInfo": "small",
            "multiRestore": "well well-sm multi-restore"
        },
        wrapper: "DTE ui small modal",
    });


    console.log($.fn.dataTable.Editor.classes);
    /*
     * Bootstrap display controller - this is effectively a proxy to the Bootstrap
     * modal control.
     */

    var self;

    DataTable.Editor.display.bootstrap = $.extend(true, {}, DataTable.Editor.models.displayController, {
        /*
         * API methods
         */
        "init": function (dte) {
            self._dom.content = null;
            self._dom.close = $('<i class="close icon"></i>');

            self._dom.close.click(function () {
                self._dte.close('icon');
            });

            $(document).on('click', 'div.modal-backdrop', function () {
                if (self._shown) {
                    self._dte.background();
                }
            });

            dte.on('open.dtebs', function (e, type) {
                if (type === 'inline' || type === 'bubble') {
                    $('input[type=text], select, textarea', self._dom.form).addClass('');
                }
            });

            return self;
        },

        "open": function (dte, append, callback) {
            if (self._shown) {
                if (callback) {
                    callback();
                }
                return;
            }

            self._dte = dte;
            self._shown = true;

            self._dom.content = append;
            $(self._dom.content).prepend(self._dom.close);

            $(self._dom.content).one('shown', function () {
                    if (callback) {
                        callback();
                    }
                }).one('hidden', function () {
                    self._shown = false;
                }).appendTo('body')
                .modal({
                    closable: false
                }).modal('show');

            $('input:not([type=checkbox]):not([type=radio]), select, textarea', self._dom.content).addClass('form-control');
        },

        "close": function (dte, callback) {
            if (!self._shown) {
                if (callback) {
                    callback();
                }
                return;
            }

            $(self._dom.content)
                .one('onHidden', function () {
                    $(this).detach();
                })
                .modal('hide');

            self._dte = dte;
            self._shown = false;

            if (callback) {
                callback();
            }
        },

        node: function (dte) {
            return self._dom.content[0];
        },


        /*
         * Private properties
         */
        "_shown": false,
        "_dte": null,
        "_dom": {}
    });

    self = DataTable.Editor.display.bootstrap;


    return DataTable.Editor;
}));
